<template>
  <div>
    <small class="dis-ib align-cm" @click="open">
      <div>资金量</div>
      <u class="text-blue">{{ num }}</u>
    </small>
    <el-dialog :visible.sync="dialogVisible" width="30%"
      :before-close="handleClose"
      append-to-body>
      <span slot="title">
        修改资金量
        <b class="text-red">输入时请注意核对输入的数字</b>
      </span>
      <el-input type="number" v-model="value" :min="min" :max="max" validate-event>
        <template slot="prepend">资金量：</template>
      </el-input>
      <div :class="{'mt20':true,'align-cm':true,'text-red':value > max}">
        {{ value2CN }}
      </div>
      <div v-if="isDev">{{ typeof value }}:{{ value }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name:'moneyEdit',
  props:{
    userId:{
      type:String,
      default:function(){return '';}
    },
    num:{
      type:[String,Number],
      default:function(){return 0;}
    },
  },
  computed:{
    value2CN:function(){
      let ver = this.verification();
      if(!ver.res){
        return ver.msg
      }
      let n = this.value;
      let fraction = ['角', '分'];
      let digit = ['零','壹','贰','叁','肆','伍','陆','柒','捌','玖'];
      let unit = [['元', '万', '亿'],['', '拾', '佰', '仟']];
      let head = n < 0 ? '欠' : '';
      n = Math.abs(n);
      let s = '';
      for (var i = 0; i < fraction.length; i++) {
        s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
      }
      s = s || '整';
      n = Math.floor(n);
      for (var i = 0; i < unit[0].length && n > 0; i++) {
        var p = '';
        for (var j = 0; j < unit[1].length && n > 0; j++) {
          p = digit[n % 10] + unit[1][j] + p;
          n = Math.floor(n / 10);
        }
        s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
        }
      return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整');
    },
    value2:function(){
      let n = this.value;
      let str = n.toString().replace(/\d+/,function(n){
        return n.replace(/(\d)(?=(?:\d{3})+$)/g,'$1,');
      })
      return str
    }
  },
  data(){
    return {
      isDev:process.env.NODE_ENV == 'development',
      value:0,
      min:(()=>{return Math.pow(10,3)})(),
      max:(()=>{return Math.pow(10,8)})(),
      dialogVisible:false,
    }
  },
  methods:{
    test(){
      console.log(this)
    },
    verification(){
      let n = this.value;
      let exp = new RegExp(/^[1-9]\d*$/);
      if (!exp.test(n)){
        return {res:false,msg:"非法数据"};  //判断数据是否大于0
      }
      if( n < this.min ){
        return {res:false,msg:`小于下限:${this.min}`};
      }
      if( n < this.min ){
        return {res:false,msg:`大于上限:${this.max}`};
      }
      return {res:true}
    },
    open(){
      if( this.userId == ''){
        this.$alert(`缺少该客户的的电话，不允许修改资金量`,`警告`,{
          type:'error',
          confirmButtonText: '确定',
        })
        return
      }
      this.dialogVisible = true;
      this.value = this.num;
    },
    close(){this.dialogVisible = false;},
    cancel(){
      this.value = 0;
      this.close();
    },
    confirm(){
      let ver = this.verification();
      if( !ver.res ){ return }
      if( this.userId == ''){ return }
      let arg = {
        phoneNumber:this.userId,
        capitalTotal:this.value,
      }
      this.$api.fromImUpdateCapitalTotal(arg).then((res)=>{
        if(res.data.code == 200){
          this.$message({
            message:'修改成功',
            type:'success'
          })
          this.$emit('updata',arg.capitalTotal)
        }else{
          this.$message({
            message:'修改失败',
            type:'error'
          })
        }
      })
      this.close()
    },
    handleClose(done){
      done()
    }
  },
  mounted(){
  },

}
</script>

<style lang="less" scoped>
.text-blue{color:#91bef0}
.align-cm{text-align:center;}
.text-red{color:red;}

</style>